import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Button, Table, Spin, Form, Popover, Tooltip, Icon, Modal } from 'choerodon-ui';
import { Permission, Page, Header, Content, stores, axios } from 'choerodon-front-boot';
import './WikiSettingHome.scss';
import CreateSpace from '../OperateWikiSetting/AddSpace';
import EditSpace from '../OperateWikiSetting/EditSpace';
import SmartTooltip from '../../../../components/SmartTooltip';
const { AppState } = stores;
const TextOverFlowStyle = {
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis'
}

@observer
class WikiSettingHome extends Component {
  constructor(props) {
    super(props);
    const Request = this.GetRequest(this.props.location.search);
    const { createSpace } = Request;
    this.state = {
      components: [],
      component: {},
      currentComponentId: undefined,
      loading: false,
      confirmShow: false,
      editComponentShow: false,
      createComponentShow: createSpace ? true : false,
      openRemove: false,
      syncVisible: false,
      syncLoading: false,
      syncOrgVisible: false,
      syncOrgLoading: false,
      syncUnderOrgVisible: false,
      syncUnderOrgLoading: false,
    };
  }

  GetRequest(url) {
    const theRequest = {};
    if (url.indexOf('?') !== -1) {
      const str = url.split('?')[1];
      const strs = str.split('&');
      for (let i = 0; i < strs.length; i += 1) {
        theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
      }
    }
    return theRequest;
  }


  componentDidMount() {
    this.loadComponents();
    window.console.log(AppState.currentMenuType);
  }

  showComponent(record) {
    this.setState({
      editComponentShow: true,
      currentComponentId: record.id,
    });
  }

  openRemove = (record) => {
    this.setState({
      openRemove: true,
      currentComponentId: record.id,
    });
  }

  closeRemove = () => {
    this.setState({ openRemove: false });
  }

  handleDelete = () => {
    this.setState({
      confirmShow: true,
    });
    axios.delete(`/wiki/v1/organizations/${AppState.currentMenuType.organizationId}/space/${this.state.currentComponentId}`)
      .then((datas) => {
        const res = this.handleProptError(datas);
        if (res) {
          this.setState({
            openRemove: false,
            confirmShow: false,
          });
          this.loadComponents();
        }
      });
  }

  handleProptError = (error) => {
    if (error && error.failed) {
      Choerodon.prompt(error.message);
      return false;
    } else {
      return true;
    }
  }

  getLastName(path) {
    const arrlen = path.split('/');
    var backstr = "";
    for (var a = 5; a < arrlen.length; a++) {
      backstr = backstr + arrlen[a];
      if (a != arrlen.length - 1) {
        backstr = backstr + "/";
      }
    }
    return backstr;
  }


  loadComponents() {
    this.setState({
      loading: true, //需要加载数据时设true
    });
    axios.post(`/wiki/v1/organizations/${AppState.currentMenuType.organizationId}/space/list_by_options?sort=id%2Cdesc`)
      .then((res) => {
        this.setState({
          components: res.content,
          loading: false,
        });
      })
      .catch((error) => {
        window.console.warn('load spaces failed, check your organization and project are correct, or please try again later');
      });
  }

  syncShowModal = () => {
    this.setState({
      syncVisible: true,
    });
  }

  handleOk = () => {
    this.setState({
      syncLoading: true,
    });
    axios.get(`/wiki/v1/organizations/${AppState.currentMenuType.organizationId}/space/sync`)
      .then((datas) => {
        const res = this.handleProptError(datas);
        if (res) {
          this.setState({
            syncVisible: false,
            syncLoading: false,
          });
          this.loadComponents();
        } else {
          this.setState({
            syncVisible: false,
            syncLoading: false,
          });
        }
      });
  }

  handleCancel = () => {
    this.setState({
      syncVisible: false,
    });
  }

  syncOrgShowModal = () => {
    this.setState({
      syncOrgVisible: true,
    });
  }

  orgHandleOk = () => {
    this.setState({
      syncOrgLoading: true,
    });
    axios.get(`/wiki/v1/organizations/${AppState.currentMenuType.organizationId}/space/sync_org`)
      .then((datas) => {
        const res = this.handleProptError(datas);
        if (res) {
          this.setState({
            syncOrgVisible: false,
            syncOrgLoading: false,
          });
          this.loadComponents();
        } else {
          this.setState({
            syncOrgVisible: false,
            syncOrgLoading: false,
          });
        }
      });
  }

  orgHandleCancel = () => {
    this.setState({
      syncOrgVisible: false,
    });
  }

  syncUnderOrgShowModal = (record) => {
    this.setState({
      syncUnderOrgVisible: true,
      currentComponentId: record.id,
    });
  }

  underOrgHandleOk = () => {
    this.setState({
      syncUnderOrgLoading: true,
    });
    axios.put(`/wiki/v1/organizations/${AppState.currentMenuType.organizationId}/space/sync/${this.state.currentComponentId}`)
      .then((datas) => {
        const res = this.handleProptError(datas);
        if (res) {
          this.setState({
            syncUnderOrgVisible: false,
            syncUnderOrgLoading: false,
          });
        } else {
          this.setState({
            syncUnderOrgVisible: false,
            syncUnderOrgLoading: false,
          });
        }
        this.loadComponents();
      })
      .catch((error) => {
        this.setState({
          syncUnderOrgVisible: false,
          syncUnderOrgLoading: false,
        });
        Choerodon.prompt(Choerodon.getMessage('同步空间失败', 'Synchronization space failed'));
      });
  }

  underOrgHandleCancel = () => {
    this.setState({
      syncUnderOrgVisible: false,
    });
  }

  render() {
    const menu = AppState.currentMenuType;
    const projectName = menu.name;
    const { type, id: projectId, organizationId: orgId } = menu;
    const column = [
      {
        title: <FormattedMessage id={'wiki.column.name'} />,
        dataIndex: 'name',
        key: 'name',
        className: 'name-column',
        render: (text, record) => {
          return (
            <div style={{ overflow: 'hidden', display: 'flex' }}><Icon type={record.icon} style={{ marginRight: 5 }} />
              <SmartTooltip>
                {record.name}
              </SmartTooltip>
            </div>
          );
        },
      },
      {
        title: <FormattedMessage id={'wiki.column.path'} />,
        key: 'path',
        // width: '15%',
        render: (test, record) => (
          <div style={{ width: '100%', ...TextOverFlowStyle }}>
            <Tooltip placement="topLeft" mouseEnterDelay={0.5} title={record.path}>
            {record.status === 'success' ?
              <a href={record.path} target="_blank" style={{ dispaly:'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: 0 }}>
                ../{this.getLastName(record.path)}
              </a>
              :
              <span  style={{ dispaly:'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: 0 }}>
                ../{this.getLastName(record.path)}
              </span>
            }
            </Tooltip>
          </div>
        ),
      },
      {
        title: <FormattedMessage id={'wiki.column.status'} />,
        key: 'status',
        // width: '15%', 
        render: (record) => {
          let statusDom = null;
          switch (record.status) {
            case 'operating':
              statusDom = (<div className="c7n-wiki-status c7n-wiki-status-operating">
                <div>{<FormattedMessage id={'operating'} />}</div>
              </div>);
              break;
            case 'success':
              statusDom = (<div className="c7n-wiki-status c7n-wiki-status-success">
                <div>{<FormattedMessage id={'success'} />}</div>
              </div>);
              break;
            case 'deleted':
              statusDom = (<div className="c7n-wiki-status c7n-wiki-status-deleted">
                <div>{<FormattedMessage id={'deleted'} />}</div>
              </div>);
              break;
            case 'failed':
              statusDom = (<div className="c7n-wiki-status c7n-wiki-status-failed">
                <div>{<FormattedMessage id={'failed'} />}</div>
              </div>);
              break;
            default:
              statusDom = null;
          }
          return (statusDom);
        },
      },
      {
        key: 'action',
        //  width: '10%',
        render: (record) => {
          let editDom = null;
          let deletDom = null;
          let syncDom = null;
          let orgSyncDom = null;
          if (record.resourceType === 'organization') {
            if (record.status === 'failed') {
              syncDom = (<React.Fragment>
                {<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'retry'} />}>
                  <Button shape="circle" size={'small'} funcType="flat" onClick={this.syncOrgShowModal}>
                    <span className="icon icon-sync" />
                  </Button>
                </Tooltip>}
              </React.Fragment>);
            }
          } else {
            switch (record.status) {
              case 'operating':
                editDom = (<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'wiki.operating'} />}>
                  <Button shape="circle" size={'small'} funcType="flat">
                    <span className="icon icon-mode_edit c7n-app-icon-disabled" />
                  </Button>
                </Tooltip>);
                deletDom = (<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'wiki.operating'} />}>
                  <Button shape="circle" size={'small'} funcType="flat">
                    <span className="icon icon-delete_forever c7n-app-icon-disabled" />
                  </Button>
                </Tooltip>);
                break;
              case 'failed':
                orgSyncDom = (<React.Fragment>
                  {<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'retry'} />}>
                    <Button shape="circle" size={'small'} funcType="flat" onClick={this.syncUnderOrgShowModal.bind(this, record)}>
                      <span className="icon icon-sync" />
                    </Button>
                  </Tooltip>}
                </React.Fragment>);
                editDom = (<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'wiki.failed'} />}>
                  <Button shape="circle" size={'small'} funcType="flat">
                    <span className="icon icon-mode_edit c7n-app-icon-disabled" />
                  </Button>
                </Tooltip>);
                deletDom = (<React.Fragment>
                  {<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'delete'} />}>
                    <Button shape="circle" size={'small'} funcType="flat" onClick={this.openRemove.bind(this, record)}>
                      <span className="icon icon-delete_forever" />
                    </Button>
                  </Tooltip>}
                </React.Fragment>);
                break;
              case 'success':
                editDom = (<React.Fragment>
                  {<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'editor'} />}>
                    <Button shape="circle" size={'small'} funcType="flat" onClick={this.showComponent.bind(this, record)}>
                      <span className="icon icon-mode_edit" />
                    </Button>
                  </Tooltip>}
                </React.Fragment>);
                deletDom = (<React.Fragment>
                  {<Tooltip trigger="hover" placement="bottom" title={<FormattedMessage id={'delete'} />}>
                    <Button shape="circle" size={'small'} funcType="flat" onClick={this.openRemove.bind(this, record)}>
                      <span className="icon icon-delete_forever" />
                    </Button>
                  </Tooltip>}
                </React.Fragment>);
                break;
            }
          }
          return (<div>
            <Permission
              service={['wiki-service.wiki-organization-space.sync']}
              type={type}
              projectId={projectId}
              organizationId={orgId}
            >
              {orgSyncDom}
            </Permission>
            <Permission
              service={['wiki-service.wiki-scanning.syncOrg']}
              type={type}
              projectId={projectId}
              organizationId={orgId}
            >
              {syncDom}
            </Permission>
            <Permission
              service={['wiki-service.wiki-organization-space.update']}
              type={type}
              projectId={projectId}
              organizationId={orgId}
            >
              {editDom}
            </Permission>
            <Permission
              service={['wiki-service.wiki-organization-space.delete']}
              type={type}
              projectId={projectId}
              organizationId={orgId}
            >
              {deletDom}
            </Permission>
          </div>);
        },
      }];
    return (
      <Page
        service={[
          'wiki-service.wiki-organization-space.create',
          'wiki-service.wiki-organization-space.pageByOptions',
          'wiki-service.wiki-organization-space.query',
          'wiki-service.wiki-organization-space.update',
          'wiki-service.wiki-organization-space.checkName',
          'wiki-service.wiki-organization-space.delete',
          'wiki-service.wiki-organization-space.sync',
          'wiki-service.wiki-scanning.syncOrg',
        ]}
        className="c7n-wiki"
      >
        <Header title={<FormattedMessage id={'wiki.header.title'} />}>
          <Permission
            service={['wiki-service.wiki-organization-space.create']}
            type={type}
            projectId={projectId}
            organizationId={orgId}
          >
            <Button funcType="flat" onClick={() => this.setState({ createComponentShow: true })}>
              <Icon type="playlist_add icon" />
              <span><FormattedMessage id={'wiki.create.space'} /></span>
            </Button>
          </Permission>
          {this.state.components.length === 0 ? <Permission
            service={['wiki-service.wiki-organization-space.sync']}
            type={type}
            projectId={projectId}
            organizationId={orgId}
          >
            <Button funcType="flat" onClick={this.syncShowModal}>
              <Icon type="sync icon" />
              <span><FormattedMessage id={'sync'} /></span>
            </Button>
          </Permission> : null}
          <Permission
            service={['wiki-service.wiki-organization-space.pageByOptions']}
            type={type}
            projectId={projectId}
            organizationId={orgId}
          >
            <Button funcType="flat" onClick={() => this.loadComponents()}>
              <Icon type="autorenew icon" />
              <span><FormattedMessage id={'refresh'} /></span>
            </Button>
          </Permission>
        </Header>
        <Content code="wiki" value={<FormattedMessage id={'wiki.link'} />}
          title={<FormattedMessage id={'wiki.title'} />}
          description={<FormattedMessage id={'wiki.description'} />}
        >
          <Spin spinning={this.state.loading}>
            <Table
              columns={column}
              dataSource={this.state.components}
              scroll={{ x: true }}
              rowKey={record => record.id}
              defaultExpandAllRows={true}
            />
          </Spin>
          {
            this.state.createComponentShow ? (
              <CreateSpace
                visible={this.state.createComponentShow}
                onCancel={() => this.setState({ createComponentShow: false })}
                onOk={() => {
                  this.loadComponents();
                  this.setState({
                    createComponentShow: false,
                  });
                }}
              />
            ) : null
          }
          {
            this.state.editComponentShow ? (
              <EditSpace
                id={this.state.currentComponentId}
                visible={this.state.editComponentShow}
                onCancel={() => this.setState({ editComponentShow: false })}
                onOk={() => {
                  this.loadComponents();
                  this.setState({
                    editComponentShow: false,
                  });
                }}
              />
            ) : null
          }
          <Modal
            closable={false}
            visible={this.state.openRemove}
            title={<FormattedMessage id={'wiki.delete.space'} />}
            footer={[
              <Button key="back" onClick={this.closeRemove}><FormattedMessage id={'cancel'} /></Button>,
              <Button key="submit" type="danger" loading={this.state.confirmShow} onClick={this.handleDelete}>
                <FormattedMessage id={'delete'} />
              </Button>,
            ]}
          >
            <p><FormattedMessage id={'wiki.delete.tooltip'} />？</p>
          </Modal>
          <Modal
            closable={false}
            title={<FormattedMessage id={'wiki.sync.space'} />}
            visible={this.state.syncVisible}
            onOk={this.handleOk}
            confirmLoading={this.state.syncLoading}
            onCancel={this.handleCancel}
          >
            <p><FormattedMessage id={'wiki.sync.tooltip'} />？</p>
          </Modal>
          <Modal
            closable={false}
            title={<FormattedMessage id={'wiki.sync.space'} />}
            visible={this.state.syncOrgVisible}
            onOk={this.orgHandleOk}
            confirmLoading={this.state.syncOrgLoading}
            onCancel={this.orgHandleCancel}
          >
            <p><FormattedMessage id={'wiki.sync.org.tooltip'} />？</p>
          </Modal>
          <Modal
            closable={false}
            title={<FormattedMessage id={'wiki.sync.space'} />}
            visible={this.state.syncUnderOrgVisible}
            onOk={this.underOrgHandleOk}
            confirmLoading={this.state.syncUnderOrgLoading}
            onCancel={this.underOrgHandleCancel}
          >
            <p><FormattedMessage id={'wiki.sync.under.org.tooltip'} />？</p>
          </Modal>
        </Content>
      </Page>
    );
  }
}

export default Form.create({})(withRouter(injectIntl(WikiSettingHome)));
